<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="container">
        <div class="p1">
          <span>{{ $t("page3.doc76") }}</span>
          <div><img src="../../assets/images/ico_bi1.png" alt="" />USDT</div>
        </div>
        <div class="p2">
          <ul>
            <li>
              <div class="pic">
                <img src="../../assets/images/Name1.png" alt="" />
                <span>{{ $t("page4.doc31") }}</span>
              </div>
              <div class="z">
                <span>{{ $t("page3.doc77") }}</span
                >{{ income_info.totalAmount }}
              </div>
            </li>
            <li>
              <div class="pic">
                <img src="../../assets/images/Name2.png" alt="" />
                <span>{{ $t("page4.doc30") }}</span>
              </div>
              <div class="z">
                <span>{{ $t("page3.doc77") }}</span
                >{{ income_info.electronBalance }}
              </div>
            </li>
          </ul>
        </div>
        <div class="p3">
          <span class="t">{{ $t("page3.doc78") }}</span>
          <div>
            <input
              type="number"
              :placeholder="$t('page3.doc79')"
              v-model="amount"
            />
            <span class="n" @click="whole">{{ $t("page3.doc80") }}</span>
          </div>
        </div>
      </div>

      <van-popup
        v-model="password_show"
        round
        :position="is_position"
        style="background: none"
      >
        <div class="password_pop">
          <div class="pass">
            <div class="title rel tac">
              {{ $t("page.doc28") }}
              <div class="abs" @click="passwordShowClick">
                <van-icon name="cross" />
              </div>
            </div>
            <div class="box rel" :class="{ on: isPc }">
              <input
                type="text"
                v-model="password"
                maxlength="6"
                class="abs"
                ref="getFocus"
              />
              <van-password-input
                :gutter="20"
                :value="password"
                :length="6"
                :focused="showKeyboard"
                @focus="showKeyboard = true"
              />
            </div>
            <button @click="getBtn" :disabled="isDisable">
              {{ $t("page.doc29") }}
            </button>
          </div>
          <div class="jianpan" v-if="!isPc">
            <p>{{ $t("page.doc30") }}</p>
            <van-number-keyboard
              v-model="password"
              :show="showKeyboard"
              @blur="showKeyboard = true"
            />
          </div>
        </div>
      </van-popup>
    </template>

    <template #footer>
      <div class="p4">
        <button class="btn" @click="onGo()">{{ $t("page3.doc81") }}</button>
      </div>
    </template>
  </page-scroll>
</template>

<script>
import { mapActions, mapMutations, mapGetters } from "vuex";

export default {
  data() {
    return {
      title: this.$t("page3.doc75"),
      titleRight: "<img src=" + require("../../assets/images/ico1.png") + ">",
      amount: "",
      password_show: false,
      showKeyboard: true,
      isPc: false,
      is_position: "bottom",
      isDisable: false,
      password: "",
      income_info: {},
    };
  },

  mounted() {},
  created() {
    this.getIncome();
  },
  computed: {},
  watch: {},

  methods: {
    // 全部按钮
    whole() {
      this.amount = this.income_info.totalAmount;
    },
    getIncome() {
      this.$post(this.URL.income.assets, {}).then((res) => {
        if (res.code == 0) {
          this.income_info = res.data;
        }
      });
    },
    passwordShowClick() {
      this.password_show = false;
      this.password = "";
    },
    onGo() {
      this.password_show = true;
    },
    getBtn() {
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 1000);

      if (!this.isDisable) {
        return;
      }
      this.$post(this.URL.wallet.transfer, {
        amount: this.amount,
        password: this.$md5(this.password),
      }).then((res) => {
        if (res.code == 0) {
          this.amount = "";
          this.password_show = false;
          this.password = "";
          this.getIncome();
          this.$toast(res.message);
        } else {
          this.$toast(res.message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.p1 {
  margin-top: 0.24rem;

  span {
    display: block;
    font-size: 0.28rem;
    text-transform: uppercase;
  }

  div {
    border-radius: 0.16rem;
    // border: var(--COborder3);
    background: var(--CObackgroundLinear2);
    margin: 0.17rem 0 0.24rem 0;
    height: 0.88rem;
    display: flex;
    align-items: center;
    padding: 0 0.24rem;
    font-size: 0.3rem;

    img {
      width: 0.44rem;
      height: 0.44rem;
      margin-right: 0.14rem;
    }
  }
}

.p2 {
  color: var(COcolor3);
  border-radius: 0.16rem;
  // border: var(--COborder3);
  background: var(--CObackgroundLinear2);
  margin-bottom: 0.3rem;

  ul {
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.24rem;
      border-bottom: var(--COborder4);

      .z {
        span {
          color: var(--COcolor1);
        }
      }

      .pic {
        display: flex;
        align-items: center;
      }

      img {
        width: 0.48rem;
        height: 0.48rem;
        margin-right: 0.14rem;
      }
    }

    li:last-child {
      border-bottom: none;
    }
  }
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.p3 {
  .t {
    display: block;
    font-size: 0.28rem;
    text-transform: uppercase;
  }

  div {
    border-radius: 0.16rem;
    // border: var(--COborder3);
    background: var(--CObackgroundLinear2);
    margin: 0.17rem 0 0.24rem 0;
    height: 0.88rem;
    display: flex;
    align-items: center;
    padding: 0 0.24rem;

    justify-content: space-between;

    .n {
      color: var(--COcolor2);
      font-weight: 600;
    }

    input {
      height: 30px;
      height: 0.59406rem;
      width: 70%;
      background: none;
      border: navajowhite;
      color: var(--COcolor3);
    }
  }

  margin-bottom: 24px;
}

.p4 {
  padding: 0.28rem;
}
</style>
